<template>
  <section >
    <div v-if="active == 0">
      <Home></Home>
    </div>
    <div v-else-if="active == 1">
      <Recommend></Recommend>
    </div>
    <div v-else-if="active == 2">
      <Cart></Cart>
    </div>
    <div v-else-if="active == 3">
      <Service></Service>
    </div>
    <div v-else-if="active == 4">
      <Center></Center>
    </div>

    <Tabbar @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
  </section>
</template>

<script type="text/ecmascript-6">
  import Tabbar from '../../components/Tabbar.vue'
  import Home from './Home.vue'
  import Recommend from './Recommend.vue'
  import Cart from './Cart.vue'
  import Service from './Service.vue'
  import Center from './Center.vue'

  export default {
    components:{
      Tabbar,Home,Recommend,Cart,Service,Center
    },
    data(){
      return{
        active: 0,
      }
    },
    created(){
        this.active = localStorage.getItem('indexActive') ? Number(localStorage.getItem('indexActive')) : 0;
//      this.setTitle(this.active)
    },
    methods:{
      tabberSelected(val){
        this.active = val;
//        this.setTitle(val)
      },
      setTitle(val){
        let title = '';
        switch (val){
          case 0:
            title = 'SOFO 按摩';
            break;
          case 1:
            title = '推荐';
            break;
          case 2:
            title = '购物车';
            break;
          case 3:
            title = '客服';
            break;
          case 4:
            title = '我的';
            break;
        }
//        console.log('title--', title);
        document.title = title;
      },
    }
  }
</script>

<!--<style lang="scss">-->
  <!--.tab-class{-->
    <!--.van-tabbar-item__icon{-->
      <!--margin-bottom: 0px;-->

      <!--.van-info{-->
        <!--right: 2px;-->
        <!--top: -4px;-->
      <!--}-->
    <!--}-->

    <!--.van-tabbar-item__icon&#45;&#45;dot::after{-->
      <!--width: 10px;-->
      <!--height: 10px;-->
      <!--right: -4px;-->
    <!--}-->

    <!--.van-tabbar-item__text{-->
      <!--span{-->
        <!--font-size: 10px;-->
      <!--}-->
    <!--}-->
  <!--}-->
<!--</style>-->
